<template>
  <div class="self-closed">
    <ul class="closed-wrap">
      <li v-for="(item,index) in list" :key="index" class="grid">
        <div class="grid-left">
          <div class="grid-left-img" @click="handleQrCode(item)">
            <img
              :src="item.fileUrl"
              alt
            >
          </div>
        </div>
        <div class="grid-body">
          <div class="grid-body-button">
<!--            <el-button size="small" @click="handleData(item)">数据</el-button>-->
            <el-button v-if="item.kind !== 'correct'" size="small" @click="handleOrder(item)">订单</el-button>
            <el-button v-if="item.kind === 'correct'" size="small" @click="handleQuestion(item)">题目</el-button>
          </div>
          <div class="grid-body-title">
            <span class="tip">{{ item.kind === 'cutPrice' ? '帮砍价' : item.kind === 'groupPurchase' ? '多人拼团' : item.kind === 'quickSell' ? '秒杀' : '竞答' }}</span>
            <span>{{ item.name }}</span>
          </div>
          <div class="grid-body-stats">
            <span class="stats-item">
              <i class="el-icon-tickets"/>&nbsp;订单量&nbsp;{{ item.orderNum ? item.orderNum : 0 }}
            </span>
            <span class="stats-item">
              <i class="el-icon-goods"/>&nbsp;总收入&nbsp;{{ item.totalIncome ? item.totalIncome : 0 }}
            </span>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { getTenantId } from '@/utils/auth'
import { getActivityListByStatus } from '@/api/tinysale/addActivity'
export default {
  data() {
    return {
      list: []
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      getActivityListByStatus('closed', getTenantId()).then(res => {
        this.list = res.data.items
      })
    },
    handleQrCode(item) {
      this.$router.push({ name: 'activity-qrcode', params: item })
    },
    handleData(item) {
      this.$router.push({ name: 'activity-data', params: item })
    },
    handleQuestion(item) {
      this.$router.push({ name: 'activity-question', params: item })
    },
    handleOrder(item) {
      this.$router.push({ name: 'activity-order', params: item })
    }
  }
}
</script>

<style lang="scss">
.self-closed {
  .closed-wrap {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    .grid {
      width: 100%;
      margin: 0 0 20px 0;
      &-left {
        display: table-cell;
        vertical-align: top;
        padding-right: 20px;
        &-img {
          display: block;
          width: 200px;
          height: 100px;
          border-radius: 3px;
          cursor: pointer;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
      &-body {
        display: table-cell;
        vertical-align: top;
        width: 10000px;
        position: relative;
        &-title {
          line-height: 25px;
          margin-bottom: 20px;
          margin-top: 5px;
          .tip {
            background: #409eff;
            color: #fff;
            font-size: 12px;
            padding: 3px;
            border: 1px solid #409eff;
            border-radius: 3px;
            vertical-align: top;
            line-height: 25px;
          }
        }
        &-button {
          vertical-align: top;
          float: right;
          padding-right: 40px;
        }
        &-stats {
          position: absolute;
          bottom: 8px;
          left: 0;
          .stats-item {
            font-size: 12px;
            color: #8492a6;
            width: 150px;
            display: inline-block;
          }
        }
      }
    }
  }
}
</style>
